import { css } from '@/styled-system/css'
import { HStack } from '@/styled-system/jsx'
import { circle } from '@/styled-system/patterns'
import { ButtonIcon } from '@/theme/icons'
import Link from 'next/link'

export const CourseMiniBanner = () => {
  return (
    <Link href="https://www.pandamastery.com/?ref=course-banner-mini">
      <HStack
        bg={{ base: 'gray.100', _dark: 'gray.800' }}
        px="2"
        rounded="sm"
        css={{ _icon: { width: '3' } }}
      >
        <span
          className={circle({ size: '1.5', bg: '#32aef2', flexShrink: '0' })}
        />
        <p>
          <span className={css({ fontWeight: 'medium' })}>
            Want to skip the docs?{' '}
          </span>
          <span className={css({ hideBelow: 'xl' })}>
            Watch the official Panda course
          </span>
        </p>
        <ButtonIcon icon="RightArrowIcon" />
      </HStack>
    </Link>
  )
}

const MiniIcon = () => (
  <svg
    viewBox="0 0 108 27"
    fill="none"
    height="18px"
    className={css({ hideBelow: 'md' })}
  >
    <rect
      x="0.933725"
      y="0.933725"
      width="105.791"
      height="25.1325"
      rx="5.29111"
      stroke="black"
      strokeWidth="1.86745"
    />
    <path
      d="M10.8337 21.2487H8.25598V7.72214H10.655V9.96806C11.1144 9.18539 11.7014 8.57286 12.416 8.13049C13.1306 7.68811 13.9559 7.46692 14.8917 7.46692C15.8785 7.46692 16.7292 7.71363 17.4438 8.20705C18.1755 8.68346 18.6944 9.37255 19.0007 10.2743C19.4771 9.40658 20.0981 8.72599 20.8638 8.23257C21.6294 7.72214 22.5312 7.46692 23.5691 7.46692C24.9643 7.46692 26.0702 7.9093 26.8869 8.79405C27.7206 9.66179 28.1375 10.8953 28.1375 12.4947V21.2487H25.5598V13.3114C25.5598 12.1714 25.3131 11.2952 24.8196 10.6827C24.3262 10.0531 23.6116 9.73836 22.6758 9.73836C22.0973 9.73836 21.5614 9.9 21.0679 10.2233C20.5915 10.5295 20.2087 10.9634 19.9195 11.5249C19.6302 12.0864 19.4856 12.7414 19.4856 13.4901V21.2487H16.9079V13.3114C16.9079 12.1714 16.6612 11.2952 16.1677 10.6827C15.6913 10.0531 14.9767 9.73836 14.0239 9.73836C13.4284 9.73836 12.8839 9.9 12.3905 10.2233C11.9141 10.5295 11.5313 10.9634 11.242 11.5249C10.9698 12.0864 10.8337 12.7414 10.8337 13.4901V21.2487Z"
      fill="black"
    />
    <path
      d="M39.3942 21.2487V19.1559C38.9688 19.9046 38.3903 20.483 37.6587 20.8914C36.9271 21.2997 36.0593 21.5039 35.0555 21.5039C33.6603 21.5039 32.5373 21.1381 31.6866 20.4065C30.8359 19.6578 30.4105 18.6625 30.4105 17.4204C30.4105 16.0933 30.9295 15.0894 31.9673 14.4089C33.0222 13.7283 34.5536 13.388 36.5613 13.388C36.9526 13.388 37.3354 13.3965 37.7098 13.4135C38.0841 13.4305 38.5435 13.4731 39.0879 13.5411V12.5458C39.0879 11.5929 38.8412 10.8528 38.3478 10.3254C37.8544 9.7809 37.1568 9.50866 36.255 9.50866C35.3192 9.50866 34.5706 9.7809 34.0091 10.3254C33.4646 10.8528 33.1754 11.5844 33.1414 12.5202H30.7933C30.8274 11.4994 31.0741 10.6146 31.5335 9.86597C32.0099 9.10031 32.6479 8.51331 33.4476 8.10496C34.2643 7.6796 35.2001 7.46692 36.255 7.46692C37.9224 7.46692 39.2155 7.9178 40.1343 8.81957C41.0701 9.70433 41.538 10.9549 41.538 12.5713V21.2487H39.3942ZM32.8606 17.3439C32.8606 18.0415 33.1073 18.6029 33.6007 19.0283C34.0942 19.4537 34.7492 19.6663 35.5659 19.6663C36.6549 19.6663 37.5141 19.3601 38.1436 18.7476C38.7732 18.118 39.0879 17.2843 39.0879 16.2464V15.149C38.5945 15.0979 38.1606 15.0639 37.7863 15.0469C37.412 15.0129 37.0547 14.9959 36.7144 14.9959C35.4213 14.9959 34.4515 15.1915 33.8049 15.5829C33.1754 15.9572 32.8606 16.5442 32.8606 17.3439Z"
      fill="black"
    />
    <path
      d="M55.3208 17.2163C55.3208 18.5434 54.8274 19.5898 53.8405 20.3554C52.8537 21.1211 51.4585 21.5039 49.655 21.5039C47.8855 21.5039 46.4818 21.0871 45.4439 20.2533C44.423 19.4196 43.8445 18.2797 43.7084 16.8334H46.184C46.218 17.6842 46.5498 18.3562 47.1793 18.8496C47.8259 19.3261 48.6681 19.5643 49.706 19.5643C50.6078 19.5643 51.3309 19.4026 51.8754 19.0793C52.4368 18.7561 52.7176 18.2797 52.7176 17.6501C52.7176 17.0886 52.5304 16.6633 52.1561 16.374C51.7988 16.0848 51.1948 15.8636 50.3441 15.7105L48.1492 15.3021C46.9071 15.0639 45.9458 14.63 45.2652 14.0005C44.5846 13.354 44.2443 12.5202 44.2443 11.4994C44.2443 10.6997 44.457 10.0021 44.8824 9.40658C45.3248 8.79405 45.9373 8.31765 46.72 7.97735C47.5026 7.63706 48.4129 7.46692 49.4508 7.46692C50.5397 7.46692 51.4925 7.65408 52.3092 8.0284C53.1259 8.3857 53.781 8.90465 54.2744 9.58523C54.7678 10.2488 55.0486 11.0485 55.1166 11.9843H52.641C52.5559 11.1846 52.2327 10.5551 51.6712 10.0957C51.1097 9.63627 50.3781 9.40658 49.4763 9.40658C48.6596 9.40658 47.996 9.57672 47.4856 9.91701C46.9922 10.2403 46.7455 10.6912 46.7455 11.2697C46.7455 11.8141 46.9241 12.231 47.2814 12.5202C47.6558 12.7925 48.2513 13.0137 49.068 13.1838L51.3649 13.6177C52.7091 13.8559 53.7044 14.2727 54.351 14.8682C54.9975 15.4638 55.3208 16.2464 55.3208 17.2163Z"
      fill="black"
    />
    <path
      d="M65.2089 18.7476V21.019C64.8176 21.2062 64.4348 21.3338 64.0604 21.4018C63.7031 21.4699 63.3203 21.5039 62.912 21.5039C62.0782 21.5039 61.3381 21.3508 60.6916 21.0445C60.062 20.7383 59.5686 20.2619 59.2113 19.6153C58.854 18.9688 58.6753 18.1521 58.6753 17.1652V9.91701H55.6893V7.72214H58.6753V3.71521H61.253V7.72214H65.3365V9.91701H61.253V16.5782C61.253 17.514 61.4572 18.1691 61.8656 18.5434C62.2909 18.9177 62.8439 19.1049 63.5245 19.1049C63.8307 19.1049 64.12 19.0793 64.3922 19.0283C64.6815 18.9602 64.9537 18.8667 65.2089 18.7476Z"
      fill="black"
    />
    <path
      d="M72.6037 21.5039C71.2935 21.5039 70.1451 21.2147 69.1582 20.6362C68.1884 20.0407 67.4312 19.207 66.8868 18.135C66.3423 17.0631 66.0701 15.8211 66.0701 14.4089C66.0701 13.0647 66.3508 11.8737 66.9123 10.8358C67.4738 9.79791 68.2394 8.98121 69.2093 8.3857C70.1791 7.77318 71.285 7.46692 72.5271 7.46692C73.548 7.46692 74.4583 7.66258 75.2579 8.05392C76.0746 8.42824 76.7637 8.9642 77.3252 9.66179C77.9037 10.3424 78.3206 11.1506 78.5758 12.0864C78.831 13.0052 78.899 14.0175 78.7799 15.1235H67.5759V13.4135H76.0491C75.9981 12.1544 75.6493 11.1761 75.0027 10.4785C74.3732 9.76388 73.531 9.40658 72.4761 9.40658C71.7104 9.40658 71.0383 9.61075 70.4598 10.0191C69.8983 10.4104 69.456 10.9804 69.1327 11.7291C68.8264 12.4607 68.6733 13.354 68.6733 14.4089C68.6733 15.4638 68.8264 16.374 69.1327 17.1397C69.439 17.8883 69.8813 18.4668 70.4598 18.8752C71.0383 19.2835 71.7359 19.4877 72.5526 19.4877C73.5224 19.4877 74.3221 19.241 74.9517 18.7476C75.5982 18.2541 76.0236 17.5651 76.2278 16.6803H78.7799C78.4567 18.1776 77.7421 19.3601 76.6361 20.2278C75.5472 21.0786 74.203 21.5039 72.6037 21.5039Z"
      fill="black"
    />
    <path
      d="M83.7154 14.3323V21.2487H81.1377V7.72214H83.5368V10.5806C84.0132 9.64478 84.7193 8.90465 85.6551 8.36018C86.6079 7.81572 87.6373 7.54348 88.7432 7.54348V10.2233C87.7734 10.1722 86.9057 10.2828 86.14 10.5551C85.3914 10.8273 84.7959 11.2782 84.3535 11.9077C83.9281 12.5202 83.7154 13.3284 83.7154 14.3323Z"
      fill="black"
    />
    <path
      d="M101.879 7.72214L95.1159 26.1744H92.3085L94.2482 21.07L88.9141 7.72214H91.696L95.6263 18.033L99.276 7.72214H101.879Z"
      fill="black"
    />
  </svg>
)

export const CourseBanner = () => {
  return (
    <Link href="https://www.pandamastery.com/?ref=course-banner">
      <HStack bg="yellow.300" pos="relative">
        <HStack
          justify="center"
          px="2"
          py="2"
          rounded="sm"
          w="full"
          pos="relative"
        >
          <MiniIcon />
          <p className={css({ color: 'black' })}>
            <span className={css({ fontWeight: 'medium' })}>
              Want to skip the docs? Check out pandamastery.com{' '}
            </span>
            <span className={css({ hideBelow: 'sm' })}>
              - the best way to learn Panda CSS
            </span>
          </p>
        </HStack>
      </HStack>
    </Link>
  )
}
